<template>
  <el-card>
    <template #header>
      <el-row>
        <el-col :span="12" align="left">
          <span>ARTICLES</span>
        </el-col>
        <el-col :span="12" align="right">
          <el-button type="primary" @click="showDialog('add', null)">新增文章</el-button>
        </el-col>
      </el-row>
    </template>
    <el-table :data="that.tableData" stripe border height="calc(100vh - 160px)" style="width: 100%">
      <el-table-column type="index" fixed="left" width="50" align="center"></el-table-column>
      <el-table-column label="ID/创建时间" width="350px">
        <template #default="scope">
          <p>UserId：{{ scope.row.userId }}</p>
          <p>ArticleId：{{ scope.row.articleId }}</p>
          <p>MenuId：{{ scope.row.menuId }} - {{ scope.row.menuInfo && scope.row.menuInfo.name }}</p>
          <p>CreateTime：{{ scope.row.createTime }}</p>
        </template>
      </el-table-column>
      <el-table-column label="标题/发布时间/状态/作者/标签" width="300px">
        <template #default="scope">
          <p class="ellipsis">标题：{{ scope.row.title }}</p>
          <p>发布时间：{{ scope.row.postTime }}</p>
          <p>状态：
            {{ scope.row.status }} -
            <template v-if="scope.row.status === 0">回收站</template>
            <template v-if="scope.row.status === 1">已发布</template>
            <template v-if="scope.row.status === 2">草稿</template>
          </p>
          <p>用户名：{{ scope.row.userInfo.userName }}</p>
          <p>标签：{{ scope.row.tags }}</p>
        </template>
      </el-table-column>
      <el-table-column label="内容" width="300px">
        <template #default="scope">
          <p class="ellipsis">HTMLContent: {{ scope.row.content }}</p>
          <p class="ellipsis">MarkdownContent: {{ scope.row.markdownContent }}</p>
          <p class="ellipsis">Description：{{ scope.row.description }}</p>
        </template>
      </el-table-column>
      <el-table-column label="评论数">
        <template #default="scope">
          <p>评论数：{{ scope.row.commentCount }}</p>
          <p>点赞数：{{ scope.row.diggCount }}</p>
          <p>阅读数：{{ scope.row.viewCount }}</p>
        </template>
      </el-table-column>
      <el-table-column prop="top" label="置顶"></el-table-column>
      <el-table-column label="操作" fixed="right" width="180px" align="center">
        <template #default="scope">
          <el-button type="text" @click="modify({articleId: scope.row.articleId, status: 1})">发布</el-button>
          <el-button type="text" class="color-danger" @click="modify({articleId: scope.row.articleId, status: 2})">草稿
          </el-button>
          <el-button type="text" class="color-danger" @click="modify({articleId: scope.row.articleId, status: 0})">回收
          </el-button>
          <el-button type="text" class="color-danger" @click="del(scope.row)">删除</el-button>
          <el-button type="text" @click="showDialog('modify', scope.row)">详情</el-button>
          <el-button type="text" @click="comment(scope.row)">评文</el-button>
          <el-button type="text" @click="getCommentList(scope.row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="that.q.page"
        :page-sizes="[1, 2, 3, 4, 5]"
        :page-size="that.q.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="that.q.total">
    </el-pagination>
  </el-card>


  <!--新增/编辑文章-->
  <el-dialog :title="dialogTitle" v-model="that.dialogVisible" top="50px" width="95%">
    <el-form label-width="80px">
      <el-row :gutter="10">
        <el-col :span="8">
          <el-form-item label="用户ID">
            <el-input v-model="that.f.userId" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="文章ID">
            <el-input v-model="that.f.articleId" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="菜单ID">
            <el-input v-model="that.f.menuId" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="菜单选择">
            <el-cascader v-model="that.cascaderValue" @change="handleCascaderChange" :options="that.menuOptions"
                         :props="{ checkStrictly: true, label: 'name', value: 'menuId' }" clearable
                         style="width: 100%;"></el-cascader>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="标题" required>
            <el-input v-model="that.f.title"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="标签">
            <el-input v-model="that.f.tags"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="正文" required>
            <v-md-editor v-model="that.f.markdownContent" height="calc(100vh - 350px)"
                         @change="handleMdEditorChange"></v-md-editor>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button type="primary" v-if="that.f_status === 'add'" @click="add(1)">发布</el-button>
      <el-button type="warning" v-if="that.f_status === 'add'" @click="add(2)">草稿</el-button>
      <el-button type="primary" v-if="that.f_status === 'modify'" @click="modify(that.f)">修改</el-button>
    </template>
  </el-dialog>

  <!--评论-->
  <el-dialog :title="'回复'" v-model="that.dialogVisible2" top="50px" width="300px">
    <el-form ref="form" label-width="100px">
      <el-form-item label="文章ID">
        <el-input v-model="that.commentForm.articleId" disabled></el-input>
      </el-form-item>
      <el-form-item label="评论者列表">
        <el-select v-model="that.commentForm.commentUserId">
          <el-option v-for="item in that.userOptions" :key="item.id" :label="item.userName" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="评论者ID">
        <el-input v-model="that.commentForm.commentUserId" disabled></el-input>
      </el-form-item>
      <el-form-item label="评论内容">
        <el-input type="textarea" v-model="that.commentForm.content"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button type="primary" @click="setCommentAdd">发表</el-button>
    </template>
  </el-dialog>

  <!--查看评论-->
  <el-dialog :title="'查看评论'" v-model="that.dialogVisible3" top="50px" width="95%">
    <el-table :data="that.commentTableData" stripe border height="calc(100vh - 200px)" row-key="commentId" default-expand-all style="width: 100%">
      <el-table-column label="层级" width="200px">
        <template #default="scope"><span class="level"><i></i>{{scope.$index}}</span></template>
      </el-table-column>
      <el-table-column label="ID" width="550px">
        <template #default="scope">
          <p>ArticleId：{{scope.row.articleId}}</p>
          <p>CommentId：{{scope.row.commentId}}</p>
          <p>CommentUserId：{{scope.row.commentUserId}}</p>
          <p>CommentUserInfo：{{scope.row.commentInfo && scope.row.commentInfo.userName}}</p>
          <p>ParentId：{{scope.row.parentId}}</p>
          <p>ParentUserId：{{scope.row.parentUserId}}</p>
          <p>ParentUserInfo：{{scope.row.parentInfo && scope.row.parentInfo.userName}}</p>
        </template>
      </el-table-column>
      <el-table-column label="评论内容" prop="content"></el-table-column>
      <el-table-column label="操作" fixed="right" width="350px">
        <template #default="scope">
          <el-form label-width="100px">
            <el-form-item label="回复人">
              <el-select v-model="that.replyForm.commentUserId">
                <el-option v-for="item in that.userOptions" :key="item.id" :label="item.userName" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="评论者ID">
              <el-input v-model="that.replyForm.commentUserId" disabled></el-input>
            </el-form-item>
            <el-form-item label="回复内容">
              <el-input v-model="that.replyForm.content"></el-input>
            </el-form-item>
            <el-form-item label="操作">
              <el-button type="text" @click="replyAdd(scope.row)">回复</el-button>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>

</template>

<script setup>
import {computed, reactive} from "vue";
import {
  articleAdd,
  articleDel,
  articleInfo,
  articleList,
  articleModify,
  commentAdd, commentList,
  menuList,
  userList
} from "../../assets/api";


let that = reactive({
  dialogVisible: false,
  dialogVisible2: false,
  dialogVisible3: false,
  f: {
    userId: '',             // 用户id
    articleId: '',          // 文章ID
    menuId: '',             // 菜单ID
    title: '',              // 标题
    content: '',            // html内容
    markdownContent: '',    // markdown内容
    tags: '',               // 标签
    createTime: '',         // 创建时间
    status: '',             // 状态
  },
  f_status: '', // add新增 modify修改
  menuOptions: [],
  tableData: [],
  q: {
    page: 1,
    size: 5,
    total: 0,
  },
  cascaderValue: [],
  commentForm: {
    articleId: '',
    commentUserId: '',
    content: ''
  },
  replyForm: {
    parentId: '',
    parentUserId: '',
    articleId: '',
    commentId: '',
    commentUserId: '',
    content: ''
  },
  userOptions: [],
  commentTableData: []
})


const handleTree2 = (arr) => {
  let cloneData = JSON.parse(JSON.stringify(arr)) // 对源数据深度克隆
  return cloneData.filter((father) => {
    let branchArr = cloneData.filter(
        (child) => father.commentId === child.parentId
    ) //返回每一项的子级数组
    branchArr.length > 0 ? (father.children = branchArr) : '' //如果存在子级，则给父级添加一个children属性，并赋值
    return !father.parentId; //返回第一层
  })
}

// 评论
const comment = (row) => {
  that.commentForm.articleId = row.articleId;
  that.dialogVisible2 = true;
}
// 评论添加
const setCommentAdd = () => {
  commentAdd(that.commentForm).then(({data})=>{
    that.dialogVisible2 = false;
  })
}

// 回复
const replyAdd = (row)=>{
  that.replyForm.parentUserId = row.commentUserId;
  that.replyForm.articleId = row.articleId;
  that.replyForm.parentId = row.commentId;
  commentAdd(that.replyForm).then(({data})=>{
    getCommentList(row)
  })
}

// 查看评论
const getCommentList = (row) => {
  commentList(row).then(({data})=>{
    that.commentTableData = handleTree2(data);
    that.dialogVisible3 = true;
  })
}


// 用户列表
const getUserlist = () => {
  userList({page: 1, size: 9999,}).then(({data}) => {
    that.userOptions = data.list;
  })
}


// 删除
const del = (row) => {
  articleDel(row).then(({data}) => {
    list()
  })
}

// 修改文章
const modify = (row) => {
  articleModify({...row}).then(({data}) => {
    that.dialogVisible = false;
    list()
  })
}


// 单页数据量
const handleSizeChange = (val) => {
  that.q.page = 1;
  that.q.size = val;
  list(null);
}

// 第几页
const handleCurrentChange = (val) => {
  that.q.page = val;
  list(null);
}

// 查询
const list = () => {
  articleList(that.q).then(({data}) => {
    that.tableData = data.list;
    that.q.page = data.page;
    that.q.size = data.size;
    that.q.total = data.total;
  })
}

// 文章新增
const add = (status) => {
  that.f.status = status;
  articleAdd(that.f).then(({data}) => {
    list();
  })
}


/* 树结构整理 */
const handleTree = (arr) => {
  let cloneData = JSON.parse(JSON.stringify(arr)) // 对源数据深度克隆
  return cloneData.filter((father) => {
    let branchArr = cloneData.filter(
        (child) => father.menuId === child.parentId
    ) //返回每一项的子级数组
    branchArr.length > 0 ? (father.children = branchArr) : '' //如果存在子级，则给父级添加一个children属性，并赋值
    return father.parentId === ''; //返回第一层
  })
}


// 重置
const reset = () => {
  that.f = {
    userId: '',             // 用户id
    articleId: '',          // 文章ID
    menuId: '',             // 菜单ID
    title: '',              // 标题
    content: '',            // html内容
    markdownContent: '',    // markdown内容
    tags: '',               // 标签
    createTime: '',         // 创建时间
  }
  that.cascaderValue = [];
}

// 查看详情
const info = (row) => {
  articleInfo(row).then(({data}) => {
    that.f = data;
    that.cascaderValue = [that.f.menuId];
  })
}

// markdown html
const handleMdEditorChange = (text, html) => {
  that.f.content = html;
  that.f.markdownContent = text;
}

// 展示弹出层
const showDialog = (mode, row) => {
  if (mode === 'add') {
    reset()
  }
  if (mode === 'modify') {
    info(row);
  }
  that.f_status = mode;
  that.dialogVisible = true;
}

// 弹出框表头
const dialogTitle = computed(() => {
  switch (that.f_status) {
    case "add":
      return '新增';
    case "modify":
      return '编辑'
  }
})


// 菜单列表
const getMenuList = () => {
  menuList().then(({data}) => {
    that.menuOptions = handleTree(data);
  })
}

// 级联选择Change
const handleCascaderChange = (val) => {
  console.log(val);
  that.f.menuId = val ? val[val.length - 1] : '';
}

getUserlist();
list();
getMenuList();
</script>

<style scoped>
/deep/.el-table td{
  padding: 0;
}
/deep/.el-table [class*=el-table__row--level] .el-table__expand-icon{
  margin-right: 0;
}
.level{
  position: relative;
  display: inline-block;
  height: 300px;
  border-left: 5px solid #2980b9;
}
.level i{
  display: inline-block;
  width: 20px;
  height: 5px;
  background-color: #2980b9;
  margin-right: 10px;
}
</style>
